<template>
  <div class="content">
    <div>新品订单工序报送</div>
    <div>
      <el-form :model="ruleForm" label-width="200px" class="ruleForm" id="form">
        <el-form-item label="值" style="display: none">
          <el-input v-model="ruleForm.value" ref="input"></el-input>
        </el-form-item>
        <el-form-item label="员工码">
          <el-input v-model="ruleForm.staff" readonly></el-input>
        </el-form-item>
        <el-form-item label="工序码">
          <el-input
            v-model="ruleForm.confirmProduction"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="产品码">
          <el-input v-model="ruleForm.code" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="工序状态">
          <el-input v-model="ruleForm.production" readonly></el-input>
        </el-form-item>
        <el-form-item label="客户代码">
          <el-input v-model="ruleForm.custNo" ref="input" readonly></el-input>
        </el-form-item>
        <el-form-item label="产品规格">
          <el-input v-model="orderItem.specs" ref="input" readonly></el-input>
        </el-form-item>

        <el-form-item label="外壳尺寸">
          <el-input
            v-model="orderItem.shellSize"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="原石供应商代码">
          <el-input
            v-model="orderItem.roughSupplier"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="原石料号">
          <el-input
            v-model="orderItem.roughItemNo"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="公差上限">
          <el-input
            v-model="orderItem.toleranceUp"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="公差下限">
          <el-input
            v-model="orderItem.toleranceDown"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="压缩角公差上限">
          <el-input
            v-model="orderItem.compressUp"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="压缩角公差下限">
          <el-input
            v-model="orderItem.compressDown"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="定经公差上限">
          <el-input
            v-model="orderItem.dingjingUp"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="定经公差下限">
          <el-input
            v-model="orderItem.dingjingDown"
            ref="input"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item v-for="(item, i) in params" :label="item.label" :key="i">
          <el-input v-model="item.value" ref="input" readonly></el-input>
        </el-form-item>

        <!-- <el-form-item align="left">
          <el-button type="primary" @click="submitForm" style="width: 260px"
            >提交</el-button
          >
        </el-form-item> -->
      </el-form>
    </div>
    <div style="margin-left: 55%; margin-top: 116px; position: absolute">
      <el-radio-group v-model="radio" @change="change()">
        <el-radio :label="1">待上传({{ tableData4.length }})</el-radio>
        <el-radio :label="2">已上传({{ tableData2.length }})</el-radio>
        <el-radio :label="3">异常({{ tableData3.length }})</el-radio>
      </el-radio-group>
      <el-button
        type="danger"
        style="margin-left: 10px; margin-bottom: 4px"
        @click="clear"
        >清除</el-button
      >
    </div>

    <div class="table">
      <template>
        <el-table
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          :data="tableData"
          style="width: 100%"
          height="550"
          border="true"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="120" sortable>
          </el-table-column>
          <el-table-column prop="number" label="模具编号" width="100" sortable>
          </el-table-column>
          <el-table-column prop="specs" label="规格" width="100" sortable>
          </el-table-column>
          <el-table-column
            prop="production"
            label="流转工艺"
            width="100"
            sortable
          >
          </el-table-column>
          <el-table-column prop="staff" label="员工" width="80" sortable>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="230">
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          @click="dialogVisible = true"
          style="width: 260px"
          >提交</el-button
        >
      </template>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="400px"
      style="font-size: 20px"
      :before-close="handleClose"
    >
      <span style="font-size: 20px">即将提交{{ tableData4.length }}条数据</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <div class="production">
      <div>工序码：</div>
      <div style="margin-left: 40px">
        <div>扩大-开始：0001/0</div>
        <div>扩大-结束：0001/1</div>
        <div>成形-开始：0002/0</div>
        <div>成形-结束：0002/1</div>
        <div>斜线-开始：0003/0</div>
        <div>斜线-结束：0003/1</div>
        <div>一设-开始：0004/0</div>
        <div>一设-结束：0004/1</div>
        <div>一研-开始：0005/0</div>
        <div>一研-结束：0005/1</div>
        <div>设定-开始：0006/0</div>
        <div>设定-结束：0006/1</div>
        <div>二研-开始：0007/0</div>
        <div>二研-结束：0007/1</div>
        <div>整形-开始：0008/0</div>
        <div>整形-开始：0008/1</div>
        <div>品管-开始：0009/0</div>
        <div>品管-结束：0009/1</div>
      </div>
    </div> -->
    <div style="text-align: center; margin-left: 10px; margin-top: -20px">
      <steps
        @querySubList="querySubList"
        :currentStep="currentStep"
        :totalSteps="totalSteps"
        :stepsData="stepsData"
      />
    </div>
    <el-dialog :visible.sync="numDialog" width="500px">
      <template>
        <el-table :data="subList" height="250">
          <el-table-column fixed prop="specs" label="规格" width="150">
          </el-table-column>
          <el-table-column fixed prop="okNum" label="OK数量" width="150">
          </el-table-column>
          <el-table-column
            fixed
            prop="replenishmentCount"
            label="补料申请数量"
            width="150"
          >
          </el-table-column>
        </el-table> </template
    ></el-dialog>
  </div>
</template>



<script>
import api from "../../../api";
import steps from "../order/steps2.vue";
import { productionList } from "../../common/enum";
import flowVue from "./flow.vue";
const debounce = (() => {
  let timer = null;
  return (callback, wait) => {
    clearTimeout(timer);
    timer = setTimeout(callback, wait);
  };
})();
export default {
  components: {
    steps,
  },
  data() {
    return {
      stepsData: [],
      subList: [],
      orderNo: "",
      numDialog: false,
      currentStep: 0,
      totalSteps: 0,
      stepsDesc: [],
      stepsDataSpec: [],
      currentStepSpec: 0,
      totalStepsSpec: 0,
      orderProduction: [],
      dialogVisible: false,
      submitFlag: true,
      radio: 1,
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      ruleForm: {
        code: "",
        confirmProduction: sessionStorage.getItem("confirmProduction"),
        production: "",
        custNo: "",
        specs: "",
        staffNumber: sessionStorage.getItem("staffNumber"),
        orderNo: "",
        number: "",
        staff: sessionStorage.getItem("staff"),
        value: "",
      },
      orderItem: {},
      firstChar: "",
      params: [],
      multipleSelection: [],
    };
  },
  watch: {
    "ruleForm.value": {
      handler: function (newVal, oldVal) {
        debounce(() => {
          console.info(newVal);
          if (newVal == "") {
            return true;
          }
          if (this.ruleForm.staff == "") {
            this.$message.error("请先扫员工码");
            return true;
          }
          if (this.ruleForm.confirmProduction == "") {
            this.$message.error("请先扫工序码");
            return true;
          } else {
            sessionStorage.setItem(
              "confirmProduction",
              this.ruleForm.confirmProduction
            );
          }

          if (this.ruleForm.value.indexOf("/") > -1) {
            let label = this.ruleForm.value.split("/")[0];
            let tag = this.ruleForm.value.split("/")[1];
            tag = tag === "0" ? "-开始" : "-结束";
            console.info(label);
            console.info(tag);
            let value = this.getProductionValue(label);
            console.info(value);
            if (value != "") {
              this.ruleForm.confirmProduction = value + tag;
            } else {
              this.ruleForm.confirmProduction = "未知";
            }
          } else if (
            this.ruleForm.value.indexOf("-") > -1 &&
            this.ruleForm.value != ""
          ) {
            this.ruleForm.code = this.ruleForm.value;
            let orderNo = this.ruleForm.code.split("-")[0];
            this.orderNo = orderNo;
            let number = this.ruleForm.code.split("-")[1];
            api
              .nextProductionRecord({ orderNo: orderNo, number: number })
              .then((res) => {
                this.ruleForm.production = res.data;
                this.ruleForm.orderNo = orderNo;
                this.ruleForm.number = number;
                if (this.ruleForm.specs != null && this.ruleForm.specs != "") {
                  api
                    .parameterUpAndDown({
                      orderNo: orderNo,
                      specs: this.ruleForm.specs,
                      production: this.ruleForm.production,
                    })
                    .then((res) => {
                      console.info(res);
                      this.params = res.data;
                    });
                }
                // 如果工序跟确认工序不一样 则给出提示
                if (
                  this.ruleForm.production != this.ruleForm.confirmProduction
                ) {
                  this.$message.error("流转工序不一致，该产品无法进行流转");
                }
                api
                  .orderNoAndNumber({ orderNo: orderNo, number: number })
                  .then((res) => {
                    this.ruleForm.custNo = res.data.custNo;
                    this.ruleForm.specs = res.data.specs;
                    this.orderItem = res.data;
                    // 如果工序一致 则将记录添加到集合中
                    if (
                      this.ruleForm.production ==
                      this.ruleForm.confirmProduction
                    ) {
                      this.changeValue(1);
                      var it = {};
                      it.orderNo = orderNo;
                      it.number = number;
                      it.production = this.ruleForm.production;
                      it.staffNumber = sessionStorage.getItem("staffNumber");
                      it.staff = sessionStorage.getItem("staff");
                      it.specs = this.ruleForm.specs;
                      var addFlag = true;
                      for (var ind = 0; ind < this.tableData.length; ind++) {
                        var item = this.tableData[ind];
                        if (it.number == item.number) {
                          addFlag = false;
                        }
                      }
                      if (addFlag) {
                        this.tableData.push(it);
                      }
                      this.tableData4 = this.tableData;
                    }

                    if (
                      this.ruleForm.production != null &&
                      this.ruleForm.production != ""
                    ) {
                      api
                        .parameterUpAndDown({
                          orderNo: orderNo,
                          specs: this.ruleForm.specs,
                          production: this.ruleForm.production,
                        })
                        .then((res) => {
                          console.info(res);
                          this.params = res.data;
                        });
                    }
                  });
              });
            this.getData();
          } else {
            if (this.ruleForm.value != "" && this.ruleForm.value != "0") {
              //将二维码认为是员工码
              this.ruleForm.staffNumber = this.ruleForm.value;
              api
                .staffFlow({ number: this.ruleForm.staffNumber })
                .then((res) => {
                  this.ruleForm.staffNumber = res.data.number;
                  this.ruleForm.staff = res.data.name;
                  sessionStorage.setItem("staff", this.ruleForm.staff);
                  sessionStorage.setItem(
                    "staffNumber",
                    this.ruleForm.staffNumber
                  );
                });
            }
          }
          this.ruleForm.value = "";
        }, 500);
      },
    },
  },
  mounted() {
    document.addEventListener("keydown", (e) => {
      // 不能包含：Enter Shift
      if ("EnterShift".indexOf(e.key) != -1) {
        return;
      }
      if (
        !isNaN(e.key) ||
        e.key == "-" ||
        e.key == "." ||
        e.key == "/" ||
        e.key == "/" ||
        /^[a-zA-Z]*$/.test(e.key)
      ) {
        this.ruleForm.value = this.ruleForm.value + e.key;
      }

      // if (!isNaN(e.key)) {
      //   this.ruleForm.value = this.ruleForm.value + e.key;
      // }
    });
  },

  methods: {
    clear() {
      var temp = [];
      if (this.radio == 1) {
        temp = this.tableData4;
      } else if (this.radio == 2) {
        temp = this.tableData2;
      } else if (this.radio == 3) {
        temp = this.tableData3;
      }
      var newList = [];
      console.info("temp", temp);
      console.info("multipleSelection", this.multipleSelection);
      for (var j = 0; j < temp.length; j++) {
        var it = temp[j];
        var flag = true;
        for (var i = 0; i < this.multipleSelection.length; i++) {
          var it2 = this.multipleSelection[i];
          console.info("it2", it2);
          console.info("it", it);

          if (
            it.orderNo == it2.orderNo &&
            it.specs == it2.specs &&
            it.number == it2.number &&
            it.production == it2.production
          ) {
            flag = false;
            // console.info("保留" + it.orderNo);
            // newList.push(it);
          }
        }
        if (flag) {
          newList.push(it);
        }
      }
      if (this.radio == 1) {
        this.tableData4 = newList;
        this.tableData = this.tableData4;
      } else if (this.radio == 2) {
        this.tableData2 = newList;
        debugger;

        this.tableData = this.tableData2;
      } else if (this.radio == 3) {
        this.tableData3 = newList;
        this.tableData = this.tableData3;
      }

      // this.tableData = [];
      // this.tableData2 = [];
      // this.tableData3 = [];
      // this.tableData4 = [];
    },
    confirmProductionChange() {
      console.info("改变");
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getProductionValue(label) {
      for (var i = 0; i < productionList.length; i++) {
        var item = productionList[i];
        console.info("item", item);
        if (label == item.label) {
          return item.value;
        }
      }
      return "";
    },
    change() {
      console.info("this.radio", this.radio);
      if (this.radio == 1) {
        this.tableData = this.tableData4;
      } else if (this.radio == 2) {
        this.tableData = this.tableData2;
      } else if (this.radio == 3) {
        this.tableData = this.tableData3;
      }
    },

    changeValue(value) {
      this.radio = value;
      console.info("this.radio", this.radio);
      if (this.radio == 1) {
        this.tableData = this.tableData4;
      } else if (this.radio == 2) {
        this.tableData = this.tableData2;
      } else if (this.radio == 3) {
        this.tableData = this.tableData3;
      }
    },

    doSubmit(item) {
      var _that = this;
      api.submitNew(item).then((res) => {
        if (res.code == 200) {
          item.remark = res.message;
          _that.tableData2.push(item);
          debugger;
        } else if (res.code == 100) {
          item.remark = res.message;
          _that.tableData3.push(item);
          console.info("tableData3", _that.tableData3);
        }
      });
    },

    async submitForm() {
      // this.initTable4();
      // this.tableData = this.tableData4;
      console.info("submitFlag", this.submitFlag);
      if (!this.submitFlag) {
        console.info("提交失败");
        return;
      }
      this.submitFlag = false;
      console.info("提交成功");
      var _that = this;

      const loading = this.$loading({
        lock: true,
        text: "数据提交中",
        fontSize: "20px",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      for (var i = 0; i < _that.tableData4.length; i++) {
        var item = _that.tableData4[i];
        await this.doSubmit(item);
        _that.tableData4.splice(i, 1);
        i--;
      }
      loading.close();
      this.submitFlag = true;
      console.info("2 3 结果");
      this.dialogVisible = false;
      this.getData();
    },
    getData() {
      api
        .orderProductionRecord({ orderNo: this.orderNo })
        .then((res) => {
          if (res.code === 200) {
            this.stepsData = [];
            for (let i = 0; i < res.data.length; i++) {
              const element = res.data[i];
              const time =
                element.startTime && element.endTime
                  ? element.startTime + "~" + element.endTime
                  : element.startTime && !element.endTime
                  ? element.startTime
                  : "";
              console.info(1);
              console.info(time);
              // this.stepsDesc.push(time);
              if (element.status == "1") this.currentStep = i + 1;
              this.stepsData.push({
                label: element.production,
                orderNo: element.orderNo,
                desc: "",
                total: element.total,
                ngNum: element.ngNum,
                ngNumStr: element.ngNumStr,
                hasDone: element.hasDone,
                toBeCompleted: element.toBeCompleted,
                status: element.status,
              });
              // if (element.status == "2") this.currentStep = i + 1;
            }
            this.orderProduction = res.data;
            this.totalSteps = res.data.length;
            console.info("currentStep=", this.currentStep);
            console.info("totalSteps=", this.totalSteps);
            console.info("stepsData=", this.stepsData);
          }
        })
        .catch();
    },
    querySubList(orderNo, production) {
      api
        .subNum({
          orderNo: orderNo,
          production: production,
        })
        .then((res) => {
          this.numDialog = true;
          this.subList = res.data.list;
        });
    },
  },
};
</script>

<style scoped>
.content {
  text-align: center;
  font-size: 30px;
  /* margin-top: 4px; */
}
#form >>> .el-form-item__label {
  font-size: 20px !important;
  margin-top: 3px;
}

#form >>> .el-input--small .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
.el-form-item {
  margin-bottom: 2px !important;
}
#form >>> .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 18px;
  /* margin-top: 4px; */
  margin-left: -10px;
}
.ruleForm {
  position: absolute;
  left: 0;
  right: 0;
  top: 180px;
  font-size: 20px !important;
  margin-left: 25%;
  /* margin: auto; */
  width: 500px;
}

.table {
  position: absolute;
  top: 210px;
  margin-left: 55%;
  /* width: 520px; */
}

.production {
  position: absolute;
  font-size: 16px !important;
  color: gray;
}
.mb_20 {
  margin-bottom: 20px !important;
}
.mt_20 {
  margin-top: 20px !important;
}
.m-steps-content {
  margin-left: -96px !important;
}
</style>